
<template>
  <div class="div">
    <span innerHTML="Click me!" class="span"></span>
    <div
      image="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d"
      backgroundSize="cover"
      backgroundPosition="center"
      class="div-2"
      :lazy="true"
      :fitContent="true"
      :aspectRatio="1"
      :height="210"
      :width="210"
    >
      <picture>
        <source
          srcSet="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?format=webp&width=100 100w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?format=webp&width=200 200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?format=webp&width=400 400w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?format=webp&width=800 800w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?format=webp&width=1200 1200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?format=webp&width=1600 1600w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?format=webp&width=2000 2000w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d"
          type="image/webp"
        />
        <img
          loading="lazy"
          src="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d"
          srcSet="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?width=100 100w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?width=200 200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?width=400 400w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?width=800 800w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?width=1200 1200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?width=1600 1600w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d?width=2000 2000w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F49e9ef859e8e41148ad0b4f505c4279d"
          class="image"
        />
      </picture>
      <div class="builder-image-sizer image-sizer"></div>
    </div>
    <div stackColumnsAt="tablet" class="div-3" :space="20">
      <div class="builder-columns columns">
        <div class="builder-column column">
          <div
            image="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8"
            backgroundPosition="center"
            backgroundSize="cover"
            class="div-4"
            :aspectRatio="0.7004048582995948"
          >
            <picture>
              <source
                srcSet="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?format=webp&width=100 100w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?format=webp&width=200 200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?format=webp&width=400 400w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?format=webp&width=800 800w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?format=webp&width=1200 1200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?format=webp&width=1600 1600w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?format=webp&width=2000 2000w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8"
                type="image/webp"
              />
              <img
                src="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8"
                srcSet="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?width=100 100w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?width=200 200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?width=400 400w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?width=800 800w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?width=1200 1200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?width=1600 1600w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8?width=2000 2000w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F84ac3618a0fc49d9a14dfd304e59e1e8"
                class="image"
              />
            </picture>
            <div class="builder-image-sizer image-sizer-2"></div>
          </div>
          <div class="div-5"><p>Enter some text...</p></div>
        </div>

        <div class="builder-column column-2">
          <div
            image="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616"
            backgroundPosition="center"
            backgroundSize="cover"
            class="div-6"
            :aspectRatio="0.7004048582995948"
          >
            <picture>
              <source
                srcSet="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?format=webp&width=100 100w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?format=webp&width=200 200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?format=webp&width=400 400w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?format=webp&width=800 800w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?format=webp&width=1200 1200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?format=webp&width=1600 1600w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?format=webp&width=2000 2000w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616"
                type="image/webp"
              />
              <img
                src="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616"
                srcSet="https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?width=100 100w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?width=200 200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?width=400 400w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?width=800 800w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?width=1200 1200w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?width=1600 1600w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616?width=2000 2000w, https://cdn.builder.io/api/v1/file/assets%2Fanonymous%2F4e22305b543245298465e6b3ca848616"
                class="image"
              />
            </picture>
            <div class="builder-image-sizer image-sizer-3"></div>
          </div>
          <div class="div-7"><p>Enter some text...</p></div>
        </div>
      </div>
    </div>
    <div class="div-8">Enter some text...</div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Builder"
}
</script>
<style>
.div {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 20px;
  height: auto;
  padding-bottom: 30px;
}
.span {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 20px;
  appearance: none;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 25px;
  padding-right: 25px;
  background-color: #3898ec;
  color: white;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}
.div-2 {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 20px;
  min-height: 20px;
  min-width: 20px;
  overflow: hidden;
}
.image {
  object-fit: cover;
  object-position: center;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.image-sizer {
  width: 100%;
  padding-top: 100%;
  pointer-events: none;
  font-size: 0;
}
.div-3 {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 20px;
}
.columns {
  display: flex;
}
@media (max-width: 999px) {
  .columns {
    flex-direction: column;
    align-items: stretch;
  }
}
.column {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: calc(50% - 10px);
  margin-left: 0px;
}
@media (max-width: 999px) {
  .column {
    width: 100%;
  }
}
.div-4 {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 30px;
  text-align: center;
  line-height: normal;
  height: auto;
  min-height: 20px;
  min-width: 20px;
  overflow: hidden;
}
.image-sizer-2 {
  width: 100%;
  padding-top: 70.04048582995948%;
  pointer-events: none;
  font-size: 0;
}
.div-5 {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 30px;
  text-align: center;
  line-height: normal;
  height: auto;
}
.column-2 {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: calc(50% - 10px);
  margin-left: 20px;
}
@media (max-width: 999px) {
  .column-2 {
    width: 100%;
  }
}
.div-6 {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 30px;
  text-align: center;
  line-height: normal;
  height: auto;
  min-height: 20px;
  min-width: 20px;
  overflow: hidden;
}
.image-sizer-3 {
  width: 100%;
  padding-top: 70.04048582995948%;
  pointer-events: none;
  font-size: 0;
}
.div-7 {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 30px;
  text-align: center;
  line-height: normal;
  height: auto;
}
.div-8 {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 20px;
  line-height: normal;
  height: auto;
  text-align: center;
}
</style>

